<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>框模型</title>
		<style>
			/* 外边距：所有元素具备边框，边框以外的距离，四个，上下 左右【微小偏移】
		    外边距问题1：行内元素：a、i、delete..只支持左右边距布局，支持
			左右推动效果
            解决方案：行转块！
			常用margin属性：两个属性值；   margin：0     auto；居中
		*/
		 h1{
			 width: 50%;
			 border: 1px solid red;
			 /* margin外边距属性:1个属性值:上   右   下   左*/
			 margin: 100px; /*? 上下   左右   上下效果没有  ？*/
			  /* margin外边距属性:2个属性值：     上下    左右*/
			 margin: 100px 200px;
			/* margin外边距属性:3个属性值：    上    右左    下*/
			margin: 100px 200px 300px;
			/* margin外边距属性:4个属性值：   上   右   下   左*/
			margin: 100px 200px 300px 400px;
			/*常用属性：自适应居中*/
			margin: auto;
		 }
		 /*外边距问题2：外边距合并问题: 上下元素都存在外边距，垂直以最大外边距值为主 
		 外边距垂直合并：最大外边距为主，怎么解决？
		 推荐：1.margin设置1个值，上下会垂直，去掉一个上下元素其中上、下外边距,重新计算
		      2.padding代替margin
		 */
		#parent{
			width: 200px;
			height: 200px;
			background: #ffff00;
			/*下外边距*/
			margin-top: 50px;
			/*父元素：border：1px solid transparent*/
			border: 1px solid transparent;
			/*父元素：overflow：hidden； 创新新块级上下文，阻止外边距合并*/
			overflow: hidden;
		}
		#child{
			margin-top: 50px;
			width: 100px;
			height: 100px;
			background: #ff5500;
		}
		
		</style>
	</head>
	<body>
		<h1>外边距合并</h1>
		<div id="parent">
			<div id="child"></div>
		</div>
		
		<hr>
		<!-- 元素：存在与框模型=外边距+边框+内边距+内容
		有些元素默认存在外边距，处理方案：通配选择器，去掉元素外边距
		 -->
		<span>行内元素</span>
		<ul>列表元素</ul>      p  √
		<li>yuansu </li>    √      form input    ×
		<table>
			<tr>
				<td>yuan</td>  ×
			</tr>
		</table>
		<h1>块元素</h1>
	</body>
</html>